<template>
    <el-footer class="ba-footer">
        <div class="footer-box">
            <div @click="navigateTo({ path: '/' })" class="footer-logo">
                <img src="~/assets/images/logo.png" />
            </div>
            <div class="footer-middle">
                <div class="footer-nav">
                    <template v-for="item in siteConfig.headNav" :key="item.path">
                        <NuxtLink v-if="item.type === 'nav'" :to="{ path: item.path }">{{ item.title }}</NuxtLink>
                        <template v-if="item.children && item.children.length > 0">
                            <template v-for="child in item.children" :key="child.path">
                                <NuxtLink v-if="child.type === 'nav'" :to="{ path: child.path }">{{ child.title }}</NuxtLink>
                            </template>
                        </template>
                    </template>
                </div>

                <div>
                    Copyright @ 2020~{{ new Date().getFullYear() }} {{ siteConfig.siteName }} {{ $t('Copyright') }}
                    <a href="http://beian.miit.gov.cn/">{{ siteConfig.recordNumber }}</a>
                </div>
            </div>
        </div>
    </el-footer>
</template>

<script setup lang="ts">
const siteConfig = useSiteConfig()
</script>

<style scoped lang="scss">
.ba-footer {
    --el-footer-height: 160px;
    --ba-footer-color: var(--el-color-info-light-9);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--el-color-info-dark-2);
    padding: 50px 0;
    color: var(--ba-footer-color);

    a {
        display: inline-block;
        text-decoration: none;
        color: var(--ba-footer-color);

        &:visited {
            color: var(--ba-footer-color);
        }
        &:hover {
            color: var(--el-color-white);
        }
    }

    .footer-box {
        width: 1280px;
        max-width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .footer-logo {
            max-height: 60px;
            max-width: 160px;
            img {
                height: 60px;
                margin: auto 10px;
            }
        }
        .footer-nav {
            margin-bottom: 15px;
            a {
                padding-right: 15px;
                &::after {
                    font-size: 12px;
                    line-height: 18px;
                    opacity: 0.8;
                    content: '|';
                    vertical-align: top;
                    padding-left: 15px;
                    color: var(--ba-footer-color);
                }

                &:last-child::after {
                    content: '';
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .footer-box {
            .footer-logo,
            .footer-nav {
                display: none;
            }
        }

        a {
            display: inline-block;
            text-align: center;
            &::after {
                content: '';
            }
        }
    }
}
</style>
